<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '新增设施',
  },
}
</route>

<template>
  <div class="add-facility-page">
    <wd-cell-group title="设施信息" border>
      <!-- 设施名称 -->
      <wd-input v-model="formData.name" label="设施名称" placeholder="请输入设施名称" />

      <!-- 分类选择器 -->
      <wd-picker
        v-model:visible="showCategoryPicker"
        v-model="selectedCategory"
        :columns="[categories.map((c) => c.name)]"
        @confirm="handleCategoryConfirm"
        label="设施分类"
      />

      <!-- 详细地址 -->
      <wd-input v-model="formData.address" label="详细地址" placeholder="请输入详细地址" />
    </wd-cell-group>

    <!-- 提交按钮 -->
    <!-- @ts-ignore -->
    <div class="submit-btn">
      <wd-button type="primary" block @click="handleSubmit" :loading="submitting">
        确认添加
      </wd-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { getFacilityCategories } from '@/service/map'
import { fetAdd } from '@/service/repair'

interface Category {
  id: number
  name: string
  deptId: number
}

// 表单数据
const formData = ref({
  name: '',
  categoryId: null as number | null,
  address: '',
  longitude: null,
  latitude: null,
})

// 分类相关
const categories = ref<Category[]>([])
const showCategoryPicker = ref(false)
const submitting = ref(false)
const selectedCategory = ref('')

// 处理分类选择
const handleCategoryConfirm = (value: any) => {
  const selectedCategoryObj = categories.value.find((c) => c.name === value.value)
  if (selectedCategoryObj) {
    formData.value.categoryId = selectedCategoryObj.id
    selectedCategory.value = selectedCategoryObj.name
  }
}

// 获取设施分类
const loadCategories = async () => {
  try {
    const res: any = await getFacilityCategories({ current: 1, size: 50 })
    categories.value = res.data.records
  } catch (error) {
    console.error('获取设施分类失败:', error)
    categories.value = []
  }
}

// 提交表单
const handleSubmit = async () => {
  console.log(formData.value)
  // 表单验证
  if (!formData.value.name.trim()) {
    uni.showToast({ title: '请输入设施名称', icon: 'none' })
    return
  }
  if (!formData.value.categoryId) {
    uni.showToast({ title: '请选择设施分类', icon: 'none' })
    return
  }
  if (!formData.value.address.trim()) {
    uni.showToast({ title: '请输入详细地址', icon: 'none' })
    return
  }

  try {
    submitting.value = true
    await fetAdd(formData.value)

    uni.showToast({
      title: '添加成功',
      icon: 'success',
      complete: () => {
        // 显示操作选择对话框
        setTimeout(() => {
          uni.showModal({
            title: '添加成功',
            content: '是否继续添加新设施？',
            cancelText: '回到首页',
            confirmText: '继续添加',
            success: (res) => {
              if (res.confirm) {
                // 重置表单
                formData.value = {
                  name: '',
                  categoryId: null,
                  address: '',
                  longitude: null,
                  latitude: null,
                }
              } else {
                // 返回首页
                uni.switchTab({
                  url: '/pages/index/index',
                })
              }
            },
          })
        }, 1500)
      },
    })
  } catch (error) {
    uni.showToast({ title: '添加失败', icon: 'error' })
  } finally {
    submitting.value = false
  }
}

// 页面加载时获取分类数据
onMounted(() => {
  loadCategories()
})
</script>

<style lang="scss" scoped>
.add-facility-page {
  min-height: 100vh;
  padding: 12px;
  background-color: #f5f5f5;
}

.submit-btn {
  padding: 0 16px;
  margin-top: 24px;
}

:deep(.wd-cell-group) {
  margin-bottom: 12px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 8px;
}

:deep(.wd-input),
:deep(.wd-cell) {
  background-color: #fff;
}

.label-text {
  font-size: 14px;
  color: #333;
}

.placeholder-text {
  color: #999;
}

:deep(.wd-cell__title) {
  min-width: 85px;
}

:deep(.wd-cell__value) {
  text-align: left;
}
</style>
